<template>
  <div class="full-content">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="管理">
        <!-- 数据表格 -->
        <a-table :data-source="list" :columns="columns" size="middle" :pagination="pagination" @change="changePage" bordered rowKey="id" :row-selection="rowSelection">
          <template slot="title">
            <a-space>
              <a-input class="search-input-item" @pressEnter="loadData" v-model="listQuery['%name%']" placeholder="ssh名称" />
              <a-input class="search-input-item" @pressEnter="loadData" v-model="listQuery['%host%']" placeholder="host" />
              <a-select show-search option-filter-prop="children" v-model="listQuery.groupName" allowClear placeholder="分组" class="search-input-item">
                <a-select-option v-for="item in groupList" :key="item">{{ item }}</a-select-option>
              </a-select>

              <a-tooltip title="按住 Ctr 或者 Alt/Option 键点击按钮快速回到第一页">
                <a-button type="primary" :loading="loading" @click="loadData">搜索 </a-button>
              </a-tooltip>

              <a-button type="primary" @click="handleAdd">新增</a-button>
              <a-button :disabled="!this.tableSelections.length" @click="syncToWorkspaceShow()" type="primary"> 批量分配</a-button>
              <a-button icon="download" type="primary" @click="handlerExportData()">导出</a-button>
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item key="1"> <a-button type="primary" @click="handlerImportTemplate()">下载导入模板</a-button> </a-menu-item>
                </a-menu>

                <a-upload name="file" accept=".csv" action="" :showUploadList="false" :multiple="false" :before-upload="beforeUpload">
                  <a-button type="primary" icon="upload"> 导入 <a-icon type="down" /> </a-button>
                </a-upload>
              </a-dropdown>
              <a-tooltip>
                <template slot="title">
                  <div>
                    <ul>
                      <li>节点状态是异步获取有一定时间延迟</li>
                      <li>节点状态会自动识别服务器中是否存在 java 环境,如果没有 Java 环境不能快速安装节点</li>
                      <li>关联节点如果服务器存在 java 环境,但是插件端未运行则会显示快速安装按钮</li>
                    </ul>
                  </div>
                </template>
                <a-icon type="question-circle" theme="filled" />
              </a-tooltip>
            </a-space>
          </template>
          <a-tooltip slot="name" slot-scope="text, item" :title="text">
            <a-button style="padding: 0" type="link" size="small" @click="handleEdit(item)"> {{ text }}</a-button>
          </a-tooltip>
          <a-tooltip slot="tooltip" slot-scope="text" :title="text"> {{ text }}</a-tooltip>
          <a-tooltip slot="host" slot-scope="text, record" :title="`${text}:${record.port}`"> {{ text }}:{{ record.port }}</a-tooltip>

          <a-popover title="系统信息" slot="osName" slot-scope="text, record">
            <template slot="content">
              <p>系统名：{{ record.osName }}</p>
              <p>系统版本：{{ record.osVersion }}</p>
              <p>CPU型号：{{ record.osCpuIdentifierName }}</p>
              <p>主机名：{{ record.hostName }}</p>
              <p>开机时间：{{ formatDuration(record.osSystemUptime) }}</p>
            </template>
            {{ text || "未知" }}
          </a-popover>
          <template slot="nodeId" slot-scope="text, record">
            <template v-if="record.status !== 2">
              <!-- 禁用监控不显示 -->
              <div v-if="record.javaVersion">
                <a-popover title="java信息" v-if="record.jpomAgentPid > 0">
                  <template slot="content">
                    <p>插件端进程ID：{{ record.jpomAgentPid }}</p>
                    <p>java版本：{{ record.javaVersion }}</p>
                  </template>
                  <a-tag color="green"> {{ record.jpomAgentPid }}</a-tag>
                </a-popover>
                <a-button v-else size="small" type="primary" @click="install(record)">安装节点</a-button>
              </div>

              <a-tag color="orange" v-else>no java</a-tag>
            </template>
            <template v-else>-</template>
          </template>
          <template slot="dockerInfo" slot-scope="text, record">
            <template v-if="record.status !== 2">
              <!-- 禁用监控不显示 -->
              <a-popover title="docker信息" v-if="record.dockerInfo">
                <template slot="content">
                  <p>路径：{{ JSON.parse(record.dockerInfo).path }}</p>
                  <p>版本：{{ JSON.parse(record.dockerInfo).version }}</p>
                </template>
                <a-tag color="green">存在</a-tag>
              </a-popover>

              <a-tag v-else>不存在</a-tag>
            </template>
            <template v-else>-</template>
          </template>
          <template slot="status" slot-scope="text, record">
            <a-tooltip :title="record.statusMsg">
              <a-tag :color="statusMap[record.status] && statusMap[record.status].color">{{ (statusMap[record.status] && statusMap[record.status].desc) || "未知" }}</a-tag>
            </a-tooltip>
          </template>
          <a-tooltip slot="renderSize" slot-scope="text" placement="topLeft" :title="renderSize(text)">
            <span>{{ renderSize(text) }}</span>
          </a-tooltip>
          <a-tooltip slot="osOccupyMemory" slot-scope="text, record" placement="topLeft" :title="`内存使用率：${formatPercent(record.osOccupyMemory)},总内存：${renderSize(record.osMoneyTotal)}`">
            <span>{{ formatPercent(record.osOccupyMemory) }}/{{ renderSize(record.osMoneyTotal) }}</span>
          </a-tooltip>

          <a-popover title="硬盘信息" slot="osMaxOccupyDisk" slot-scope="text, record">
            <template slot="content">
              <p>硬盘总量：{{ renderSize(record.osMoneyTotal) }}</p>
              <p>硬盘最大的使用率：{{ formatPercent(record.osMaxOccupyDisk) }}</p>
              <p>使用率最大的分区：{{ record.osMaxOccupyDiskName }}</p>
            </template>
            <span>{{ formatPercent(record.osMaxOccupyDisk) }} / {{ renderSize(record.osMoneyTotal) }}</span>
          </a-popover>

          <a-tooltip slot="osOccupyCpu" slot-scope="text, record" placement="topLeft" :title="`CPU使用率：${formatPercent2Number(record.osOccupyCpu)}%,CPU数：${record.osCpuCores}`">
            <span>{{ (formatPercent2Number(record.osOccupyCpu) || "-") + "%" }} / {{ record.osCpuCores }}</span>
          </a-tooltip>

          <template slot="operation" slot-scope="text, record">
            <a-space>
              <a-dropdown>
                <a-button size="small" type="primary" @click="handleTerminal(record, false)">终端<a-icon type="down" /></a-button>
                <a-menu slot="overlay">
                  <a-menu-item key="1">
                    <a-button size="small" type="primary" icon="fullscreen" @click="handleTerminal(record, true)">全屏终端</a-button>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-button size="small" type="primary" @click="syncToWorkspaceShow(record)">分配</a-button>
              <a-button size="small" type="primary" @click="handleFile(record)">文件</a-button>
              <a-button size="small" type="primary" @click="handleViewWorkspaceSsh(record)">关联</a-button>

              <a-dropdown>
                <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button size="small" type="danger" @click="handleDelete(record)">删除</a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button size="small" type="primary" @click="handleViewLog(record)">终端日志</a-button>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </a-space>
          </template>
        </a-table>
        <!-- 编辑区 -->
        <a-modal destroyOnClose v-model="editSshVisible" width="600px" title="编辑 SSH" @ok="handleEditSshOk" :maskClosable="false">
          <a-form-model ref="editSshForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="SSH 名称" prop="name">
              <a-input v-model="temp.name" :maxLength="50" placeholder="SSH 名称" />
            </a-form-model-item>
            <a-form-model-item label="分组名称" prop="group">
              <custom-select v-model="temp.groupName" :data="groupList" suffixIcon="" inputPlaceholder="添加分组" selectPlaceholder="选择分组名"> </custom-select>
            </a-form-model-item>
            <a-form-model-item label="Host" prop="host">
              <a-input-group compact prop="host">
                <a-input style="width: 70%" v-model="temp.host" placeholder="主机 Host" />
                <a-input-number style="width: 30%" v-model="temp.port" :min="1" placeholder="端口号" />
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="认证方式" prop="connectType">
              <a-radio-group v-model="temp.connectType" :options="options" />
            </a-form-model-item>
            <a-form-model-item prop="user">
              <template #label>
                <a-tooltip>
                  用户名
                  <template slot="title"> 账号支持引用工作空间变量：<b>$ref.wEnv.xxxx</b> xxxx 为变量名称</template>
                  <a-icon v-if="!temp.id" type="question-circle" theme="filled" />
                </a-tooltip>
              </template>
              <a-input v-model="temp.user" placeholder="用户">
                <a-tooltip v-if="temp.id" slot="suffix" title=" 密码字段和密钥字段在编辑的时候不会返回，如果需要重置或者清空就请点我">
                  <a-button size="small" type="danger" @click="handerRestHideField(temp)">清除</a-button>
                </a-tooltip>
              </a-input>
            </a-form-model-item>
            <!-- 新增时需要填写 -->
            <!--				<a-form-model-item v-if="temp.type === 'add'" label="Password" prop="password">-->
            <!--					<a-input-password v-model="temp.password" placeholder="密码"/>-->
            <!--				</a-form-model-item>-->
            <!-- 修改时可以不填写 -->
            <a-form-model-item :prop="`${temp.type === 'add' && temp.connectType === 'PASS' ? 'password' : 'password-update'}`">
              <template #label>
                <a-tooltip>
                  密码
                  <template slot="title"> 密码支持引用工作空间变量：<b>$ref.wEnv.xxxx</b> xxxx 为变量名称</template>
                  <a-icon v-if="!temp.id" type="question-circle" theme="filled" />
                </a-tooltip>
              </template>
              <!-- <a-input-password v-model="temp.password" :placeholder="`${temp.type === 'add' ? '密码' : '密码若没修改可以不用填写'}`" /> -->
              <custom-input
                :input="temp.password"
                :envList="envVarList"
                @change="
                  (v) => {
                    temp = { ...temp, password: v };
                  }
                "
                :placeholder="`${temp.type === 'add' ? '密码' : '密码若没修改可以不用填写'}`"
              >
              </custom-input>
            </a-form-model-item>
            <a-form-model-item v-if="temp.connectType === 'PUBKEY'" prop="privateKey">
              <template slot="label">
                <a-tooltip placement="topLeft">
                  私钥内容
                  <template slot="title">不填将使用默认的 $HOME/.ssh 目录中的配置,使用优先级是：id_dsa>id_rsa>identity </template>
                  <a-icon v-if="temp.type !== 'edit'" type="question-circle" theme="filled" />
                </a-tooltip>
              </template>

              <a-textarea v-model="temp.privateKey" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="私钥内容,不填将使用默认的 $HOME/.ssh 目录中的配置。支持配置文件目录:file:/xxxx/xx" />
            </a-form-model-item>
            <a-form-model-item label="编码格式" prop="charset">
              <a-input v-model="temp.charset" placeholder="编码格式" />
            </a-form-model-item>
            <a-form-model-item label="超时时间(s)" prop="timeout">
              <a-input-number v-model="temp.timeout" :min="1" placeholder="单位秒,最小值 1 秒" style="width: 100%" />
            </a-form-model-item>
            <a-form-model-item label="文件后缀" prop="suffix">
              <template slot="help">
                此配置仅对服务端管理生效, 工作空间的 ssh 配置需要单独配置（<span style="color: red">配置方式：SSH列表->操作栏中->关联按钮->对应工作空间->操作栏中->配置按钮</span>）。
              </template>
              <a-input
                v-model="temp.allowEditSuffix"
                type="textarea"
                :rows="5"
                style="resize: none"
                placeholder="请输入允许编辑文件的后缀及文件编码，不设置编码则默认取系统编码，多个使用换行。示例：设置编码：txt@utf-8， 不设置编码：txt"
              />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
        <!-- 安装节点 -->
        <a-modal
          destroyOnClose
          v-model="nodeVisible"
          width="80%"
          title="安装插件端"
          :footer="null"
          @cancel="
            () => {
              this.nodeVisible = false;
              this.loadData();
            }
          "
          :maskClosable="false"
        >
          <fastInstall v-if="nodeVisible"></fastInstall>
        </a-modal>
        <!-- 文件管理 -->
        <a-drawer
          destroyOnClose
          :title="`${this.temp.name} 文件管理`"
          placement="right"
          width="90vw"
          :visible="drawerVisible"
          @close="
            () => {
              this.drawerVisible = false;
            }
          "
        >
          <ssh-file v-if="drawerVisible" :machineSshId="temp.id" />
        </a-drawer>
        <!-- Terminal -->
        <a-modal
          destroyOnClose
          :dialogStyle="{
            maxWidth: '100vw',
            top: this.terminalFullscreen ? 0 : false,
            paddingBottom: 0,
          }"
          :width="this.terminalFullscreen ? '100vw' : '80vw'"
          :bodyStyle="{
            padding: '0 10px',
            paddingTop: '10px',
            marginRight: '10px',
            height: `${this.terminalFullscreen ? 'calc(100vh - 56px)' : '70vh'}`,
          }"
          v-model="terminalVisible"
          :title="temp.name"
          :footer="null"
          :maskClosable="false"
        >
          <terminal v-if="terminalVisible" :machineSshId="temp.id" />
        </a-modal>
        <!-- 操作日志 -->
        <a-modal destroyOnClose v-model="viewOperationLog" title="操作日志" width="80vw" :footer="null" :maskClosable="false">
          <OperationLog v-if="viewOperationLog" :machineSshId="temp.id"></OperationLog>
        </a-modal>
        <!-- 查看 ssh 关联工作空间的信息 -->
        <a-modal destroyOnClose v-model="viewWorkspaceSsh" width="50%" title="关联工作空间ssh" :footer="null" :maskClosable="false">
          <a-list bordered :data-source="workspaceSshList">
            <a-list-item slot="renderItem" slot-scope="item" style="display: block">
              <a-row>
                <a-col :span="10">SSH名称：{{ item.name }}</a-col>
                <a-col :span="10">所属工作空间： {{ item.workspace && item.workspace.name }}</a-col>
                <a-col :span="4">
                  <a-button v-if="item.workspace" size="small" type="primary" @click="configWorkspaceSsh(item)">配置 </a-button>
                  <a-button v-else size="small" type="danger" @click="handleDeleteWorkspaceItem(item)">删除 </a-button>
                </a-col>
              </a-row>
            </a-list-item>
          </a-list>
        </a-modal>
        <a-modal destroyOnClose v-model="configWorkspaceSshVisible" width="50%" title="配置ssh" @ok="handleConfigWorkspaceSshOk" :maskClosable="false">
          <a-form-model ref="editConfigWorkspaceSshForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-alert message="当前配置仅对选择的工作空间生效,其他工作空间需要另行配置" banner />
            </a-form-model-item>
            <a-form-model-item label="SSH 名称">
              <a-input v-model="temp.name" :disabled="true" :maxLength="50" placeholder="SSH 名称" />
            </a-form-model-item>
            <a-form-model-item label="工作空间名称">
              <a-input v-model="temp.workspaceName" :disabled="true" :maxLength="50" placeholder="工作空间名称" />
            </a-form-model-item>

            <a-form-model-item prop="fileDirs">
              <template slot="label">
                <a-tooltip>
                  文件目录
                  <template slot="title"> 绑定指定目录可以在线管理，同时构建 ssh 发布目录也需要在此配置 </template>
                  <a-icon type="question-circle" theme="filled" />
                </a-tooltip>
              </template>
              <a-textarea v-model="temp.fileDirs" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="授权可以直接访问的目录，多个回车换行即可" />
            </a-form-model-item>

            <a-form-model-item label="文件后缀" prop="suffix">
              <a-input
                v-model="temp.allowEditSuffix"
                type="textarea"
                :rows="5"
                style="resize: none"
                placeholder="请输入允许编辑文件的后缀及文件编码，不设置编码则默认取系统编码，多个使用换行。示例：设置编码：txt@utf-8， 不设置编码：txt"
              />
            </a-form-model-item>
            <a-form-model-item prop="notAllowedCommand">
              <template slot="label">
                <a-tooltip>
                  禁止命令
                  <template slot="title">
                    限制禁止在在线终端执行的命令
                    <ul>
                      <li>超级管理员没有任何限制</li>
                      <li>其他用户可以配置权限解除限制</li>
                    </ul>
                  </template>
                  <a-icon type="question-circle" theme="filled" />
                </a-tooltip>
              </template>
              <a-textarea v-model="temp.notAllowedCommand" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="禁止命令是不允许在终端执行的名，多个逗号隔开。(超级管理员没有任何限制)" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
        <!-- 分配到其他工作空间 -->
        <a-modal destroyOnClose v-model="syncToWorkspaceVisible" title="分配到其他工作空间" @ok="handleSyncToWorkspace" :maskClosable="false">
          <a-form-model :model="temp" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-model-item> </a-form-model-item>
            <a-form-model-item label="选择工作空间" prop="workspaceId">
              <a-select show-search option-filter-prop="children" v-model="temp.workspaceId" placeholder="请选择工作空间">
                <a-select-option v-for="item in workspaceList" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </a-tab-pane>
      <a-tab-pane key="2" tab="命令日志"> <OperationLog type="machinessh"></OperationLog></a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import {
  machineSshListData,
  machineSshListGroup,
  machineSshEdit,
  machineSshDelete,
  machineListGroupWorkspaceSsh,
  machineSshSaveWorkspaceConfig,
  machineSshDistribute,
  restHideField,
  importTemplate,
  exportData,
  importData,
  statusMap,
} from "@/api/system/assets-ssh";
import { COMPUTED_PAGINATION, PAGE_DEFAULT_LIST_QUERY, parseTime, CHANGE_PAGE, renderSize, formatPercent, formatDuration, formatPercent2Number } from "@/utils/const";
import fastInstall from "@/pages/node/fast-install.vue";
import CustomSelect from "@/components/customSelect";
import CustomInput from "@/components/customInput";
import SshFile from "@/pages/ssh/ssh-file";
import Terminal from "@/pages/ssh/terminal";
import OperationLog from "@/pages/system/assets/ssh/operation-log";
import { deleteForeSsh } from "@/api/ssh";
import { getWorkspaceEnvAll, getWorkSpaceListAll } from "@/api/workspace";

export default {
  components: { fastInstall, CustomSelect, Terminal, SshFile, OperationLog, CustomInput },
  computed: {
    pagination() {
      return COMPUTED_PAGINATION(this.listQuery);
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys) => {
          this.tableSelections = selectedRowKeys;
        },
        selectedRowKeys: this.tableSelections,
      };
    },
  },
  data() {
    return {
      loading: true,
      groupList: [],
      list: [],
      listQuery: Object.assign({}, PAGE_DEFAULT_LIST_QUERY),
      editSshVisible: false,
      temp: {},
      statusMap,
      // tempPwd: '',
      options: [
        { label: "密码", value: "PASS" },
        { label: "证书", value: "PUBKEY" },
      ],
      columns: [
        { title: "名称", dataIndex: "name", width: 120, sorter: true, ellipsis: true, scopedSlots: { customRender: "name" } },

        { title: "Host", dataIndex: "host", width: 120, sorter: true, ellipsis: true, scopedSlots: { customRender: "host" } },
        // { title: "Port", dataIndex: "port", sorter: true, width: 80, ellipsis: true, scopedSlots: { customRender: "tooltip" } },
        { title: "用户名", dataIndex: "user", sorter: true, width: "80px", ellipsis: true, scopedSlots: { customRender: "tooltip" } },
        { title: "系统名", dataIndex: "osName", width: 120, sorter: true, ellipsis: true, scopedSlots: { customRender: "osName" } },
        { title: "CPU", dataIndex: "osOccupyCpu", sorter: true, width: "100px", ellipsis: true, scopedSlots: { customRender: "osOccupyCpu" } },
        { title: "内存", dataIndex: "osOccupyMemory", sorter: true, width: "100px", ellipsis: true, scopedSlots: { customRender: "osOccupyMemory" } },
        { title: "硬盘", dataIndex: "osMaxOccupyDisk", sorter: true, width: "100px", ellipsis: true, scopedSlots: { customRender: "osMaxOccupyDisk" } },
        // { title: "编码格式", dataIndex: "charset", sorter: true, width: 120, ellipsis: true, scopedSlots: { customRender: "tooltip" } },
        { title: "连接状态", dataIndex: "status", ellipsis: true, align: "center", width: "100px", scopedSlots: { customRender: "status" } },
        {
          title: "节点状态",
          dataIndex: "nodeId",
          scopedSlots: { customRender: "nodeId" },
          width: "80px",
          ellipsis: true,
        },
        {
          title: "docker",
          dataIndex: "dockerInfo",
          scopedSlots: { customRender: "dockerInfo" },
          width: "80px",
          ellipsis: true,
        },
        {
          title: "创建时间",
          dataIndex: "createTimeMillis",
          ellipsis: true,
          sorter: true,
          customRender: (text) => parseTime(text),
          width: "170px",
        },
        {
          title: "修改时间",
          dataIndex: "modifyTimeMillis",
          sorter: true,
          ellipsis: true,
          customRender: (text) => parseTime(text),
          width: "170px",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          width: "300px",
          align: "center",
          // ellipsis: true,
          fixed: "right",
        },
      ],
      // 表单校验规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        host: [{ required: true, message: "请输入主机地址", trigger: "blur" }],
        port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
        connectType: [
          {
            required: true,
            message: "请选择连接方式",
            trigger: "blur",
          },
        ],
        user: [{ required: true, message: "请输入账号名", trigger: "blur" }],
        password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
      },
      nodeVisible: false,

      terminalVisible: false,
      terminalFullscreen: false,
      viewOperationLog: false,
      drawerVisible: false,
      workspaceSshList: [],
      viewWorkspaceSsh: false,
      configWorkspaceSshVisible: false,
      syncToWorkspaceVisible: false,
      workspaceList: [],
      tableSelections: [],
      envVarList: [],
    };
  },
  created() {
    this.loadData();
    this.loadGroupList();
    this.getWorkEnvList();
  },
  methods: {
    formatDuration,
    renderSize,
    formatPercent,
    formatPercent2Number,
    getWorkEnvList() {
      getWorkspaceEnvAll({
        workspaceId: "GLOBAL",
      }).then((res) => {
        if (res.code === 200) {
          this.envVarList = res.data;
        }
      });
    },
    // 加载数据
    loadData(pointerEvent) {
      this.loading = true;
      this.listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : this.listQuery.page;
      machineSshListData(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.list = res.data.result;
          this.listQuery.total = res.data.total;
          //
        }
        this.loading = false;
      });
    },
    // 获取所有的分组
    loadGroupList() {
      machineSshListGroup().then((res) => {
        if (res.data) {
          this.groupList = res.data;
        }
      });
    },
    // 新增 SSH
    handleAdd() {
      this.temp = {
        charset: "UTF-8",
        port: 22,
        timeout: 5,
        connectType: "PASS",
      };
      this.editSshVisible = true;
      // @author jzy 08-04
      this.$refs["editSshForm"] && this.$refs["editSshForm"].resetFields();
    },
    // 修改
    handleEdit(record) {
      this.temp = Object.assign({}, record, {
        allowEditSuffix: record.allowEditSuffix ? JSON.parse(record.allowEditSuffix).join("\r\n") : "",
      });

      this.temp = {
        ...this.temp,

        timeout: record.timeout || 5,
      };
      this.editSshVisible = true;
      // @author jzy 08-04
      this.$refs["editSshForm"] && this.$refs["editSshForm"].resetFields();
      this.loadGroupList();
    },
    // 提交 SSH 数据
    handleEditSshOk() {
      // 检验表单
      this.$refs["editSshForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 提交数据
        machineSshEdit(this.temp).then((res) => {
          if (res.code === 200) {
            this.$notification.success({
              message: res.msg,
            });
            this.editSshVisible = false;
            this.loadData();
            this.loadGroupList();
          }
        });
      });
    },
    // 分页、排序、筛选变化时触发
    changePage(pagination, filters, sorter) {
      this.listQuery = CHANGE_PAGE(this.listQuery, { pagination, sorter });
      this.loadData();
    },
    // 安装节点
    install() {
      this.nodeVisible = true;
    },
    // 进入终端
    handleTerminal(record, terminalFullscreen) {
      this.temp = Object.assign({}, record);
      this.terminalVisible = true;
      this.terminalFullscreen = terminalFullscreen;
    },
    // 删除
    handleDelete(record) {
      this.$confirm({
        title: "系统提示",
        content: "真的要删除机器 SSH 么？",
        zIndex: 1009,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          // 删除
          machineSshDelete({
            id: record.id,
          }).then((res) => {
            if (res.code === 200) {
              this.$notification.success({
                message: res.msg,
              });
              this.loadData();
            }
          });
        },
      });
    },

    // 操作日志
    handleViewLog(record) {
      this.temp = Object.assign({}, record);
      this.viewOperationLog = true;
    },
    // 查看工作空间的 ssh
    handleViewWorkspaceSsh(item) {
      machineListGroupWorkspaceSsh({
        id: item.id,
      }).then((res) => {
        if (res.code === 200) {
          this.temp = {
            machineSshId: item.id,
          };
          this.viewWorkspaceSsh = true;
          this.workspaceSshList = res.data;
        }
      });
    },
    // 配置 ssh
    configWorkspaceSsh(item) {
      this.temp = {
        ...this.temp,
        id: item.id,
        name: item.name,
        fileDirs: item.fileDirs ? JSON.parse(item.fileDirs).join("\r\n") : "",
        allowEditSuffix: item.allowEditSuffix ? JSON.parse(item.allowEditSuffix).join("\r\n") : "",
        workspaceName: item.workspace?.name,
      };
      this.configWorkspaceSshVisible = true;
    },
    // 提交 SSH 配置 数据
    handleConfigWorkspaceSshOk() {
      // 检验表单
      this.$refs["editConfigWorkspaceSshForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 提交数据
        machineSshSaveWorkspaceConfig(this.temp).then((res) => {
          if (res.code === 200) {
            this.$notification.success({
              message: res.msg,
            });
            this.configWorkspaceSshVisible = false;
            machineListGroupWorkspaceSsh({
              id: this.temp.machineSshId,
            }).then((res) => {
              if (res.code === 200) {
                this.workspaceSshList = res.data;
              }
            });
          }
        });
      });
    },
    // 删除工作空间的数据
    handleDeleteWorkspaceItem(record) {
      this.$confirm({
        title: "系统提示",
        zIndex: 1009,
        content: "真的要删除对应工作空间的 SSH 么？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          // 删除
          deleteForeSsh(record.id).then((res) => {
            if (res.code === 200) {
              this.$notification.success({
                message: res.msg,
              });
              machineListGroupWorkspaceSsh({
                id: this.temp.machineSshId,
              }).then((res) => {
                if (res.code === 200) {
                  this.workspaceSshList = res.data;
                }
              });
            }
          });
        },
      });
    },
    // 文件管理
    handleFile(record) {
      this.temp = Object.assign({}, record);

      this.drawerVisible = true;
    },
    // 加载工作空间数据
    loadWorkSpaceListAll() {
      getWorkSpaceListAll().then((res) => {
        if (res.code === 200) {
          this.workspaceList = res.data;
        }
      });
    },
    // 同步到其他工作情况
    syncToWorkspaceShow(item) {
      this.syncToWorkspaceVisible = true;
      this.loadWorkSpaceListAll();
      if (item) {
        this.temp = {
          ids: item.id,
        };
      }
    },
    handleSyncToWorkspace() {
      if (!this.temp.workspaceId) {
        this.$notification.warn({
          message: "请选择工作空间",
        });
        return false;
      }
      if (!this.temp.ids) {
        this.temp = { ...this.temp, ids: this.tableSelections.join(",") };
        this.tableSelections = [];
      }
      // 同步
      machineSshDistribute(this.temp).then((res) => {
        if (res.code == 200) {
          this.$notification.success({
            message: res.msg,
          });

          this.syncToWorkspaceVisible = false;
          return false;
        }
      });
    },
    // 清除隐藏字段
    handerRestHideField(record) {
      this.$confirm({
        title: "系统提示",
        zIndex: 1009,
        content: "真的要清除 SSH 隐藏字段信息么？（密码，私钥）",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          // 恢复
          restHideField(record.id).then((res) => {
            if (res.code === 200) {
              this.$notification.success({
                message: res.msg,
              });
              this.loadData();
            }
          });
        },
      });
    },
    // 下载导入模板
    handlerImportTemplate() {
      window.open(importTemplate(), "_blank");
    },
    handlerExportData() {
      window.open(exportData({ ...this.listQuery }), "_blank");
    },
    beforeUpload(file) {
      const formData = new FormData();
      formData.append("file", file);
      importData(formData).then((res) => {
        if (res.code === 200) {
          this.$notification.success({
            message: res.msg,
          });
          this.loadData();
        }
      });
    },
  },
};
</script>
